<template>
  <div style="margin-top: 10px;height: 100%;">
    <div style="margin-left: 100px">
      <Input v-model="searchingKey" placeholder="请输入搜索 key 任务描述 " style="width: 300px"/>
      <Button type="primary" style="margin-left: 10px" icon="ios-search" v-on:click="search()">搜索</Button>
    </div>
    <div style="margin-top: 100px">
      <Button type="primary" style="margin-bottom: 10px" @click="modalAddCron = true">添加</Button>

      <Table width="100%" border :columns="columns1" :data="taskList"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :page="page" :pageSize="rows" @on-change="changePage"></Page>
        </div>
      </div>
    </div>
    <!--删除确认框 Modal 开始-->
    <Modal v-model="modalDemove" title="删除确认框" :loading="loading" @on-ok="removeKey">
      <p>是否删除 "{{jobKey1}} , "{{description1}}" ？</p>
    </Modal>
    <!--删除确认框 Modal 结束-->

    <!--新增任务框 Modal 开始-->
    <Modal v-model="modalAddCron" title="添加Corn任务" @on-ok="addCron">
      <table>
        <tr>
          <td width="30%" style="text-align:right;">任务描述:</td>
          <td width="70%"><Input v-model="description" placeholder="请输入任务描述" style="width: 300px"/></td>
        </tr>
        <tr>
          <td style="text-align:right;">Cron表达式:</td>
          <td><Input v-model="cronExpression" placeholder="请输入Cron表达式" style="width: 300px"/></td>
        </tr>
        <tr>
          <td style="text-align:right;">回调地址:</td>
          <td><Input v-model="url" placeholder="请输入回调地址" style="width: 300px"/></td>
        </tr>
        <tr>
          <td style="text-align:right;">回调参数:</td>
          <td><Input v-model="bodyParameter" placeholder="请输入回调参数" style="width: 300px"/></td>
        </tr>
      </table>
    </Modal>
    <!--新增任务框 Modal 结束-->
  </div>
</template>
<script>
  import axios from 'axios'
  import test from './test'

  console.info('为何说呢么', test.state);
  export default {
    name: 'hello',
    data () {
      return {
        description: '',
        cronExpression: '',
        url: '',
        bodyParameter: '',
        jobKey1: '', // 删除提示的jobKey
        description1: '',  // 删除提示的描述
        password: '',
        columns1: [
          {
            title: '任务KEY',
            key: 'key',
            width: '10%'
          },
          {
            title: 'Cron表达式',
            key: 'cronExpression',
            width: '7%'
          },
          {
            title: '任务描述',
            key: 'description',
            width: '18%'
          },
          {
            title: '任务回调地址',
            key: 'url',
            width: '18%'
          },
          {
            title: '任务回调参数',
            key: 'bodyParameter',
            width: '30%'
          },
          {
            title: '创建时间',
            key: 'createDate',
            width: '7%'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.showRemove(params.index)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        taskList: [],
        modalDemove: false,
        modalAddCron: false,
        loading: true,
        // 分页
        page: 1,
        rows: 15,
        total: 0,

        // 搜索条件
        searchingKey: '',
        refresh: 0
      }
    },
    methods: {
      search () {
        this.refresh = 1;
        this.getTaskList()
      },
      getTaskList () {
        axios.get('/cron/searchingKey', {
          params: {
            searchingKey: this.searchingKey,
            page: this.page,
            rows: this.rows,
            refresh: this.refresh
          }
        })
          .then(response => {
            console.log('查询返回的data', response.data);
            let list = response.data.List;
            this.taskList = list;
            this.total = response.data.total;
            this.refresh = 0
          })
          .catch(response => {
            console.log(response)
          })
      },
      showRemove (index) {
        let data = this.taskList[index];
        this.modalDemove = true;
        this.jobKey1 = data.key;
        this.description1 = data.description
      },
      removeKey () {
        axios.post('/deleteTask', {jobKey: this.jobKey1})
          .then(response => {
            console.log('删除key返回的data', response.data);
            let code = response.data.code;
            if (code === '0') {
              this.refresh = 1;
              this.getTaskList();
              this.modalDemove = false;
              this.$Message.success('删除成功')
            } else {
              this.$Message.warning('删除失败：' + response.data.msg)
            }
          })
          .catch(response => {
            this.$Message.error(response)
          })
      },
      changePage (page) {
        this.page = page;
        this.getTaskList()
      },
      addCron () {
        axios.post('/addTask', {
          description: this.description,
          cronExpression: this.cronExpression,
          url: this.url,
          bodyParameter: this.bodyParameter
        })
          .then(response => {
            let data = response.data;
            console.log('添加返回的data', data);
            if (data.code === '0') {
              this.refresh = 1;
              this.getTaskList();
              this.$Message.success('添加成功')
            } else {
              this.$Message.warning(data.msg)
            }
          })
          .catch(response => {
            this.$Message.error(response)
          })
      }
    },
    mounted () {
      // 打开页面第一个执行的方法
      this.$nextTick(
        this.search()
      )
    }
  }
</script>
